<template>
  <el-dialog @close="btnCancel" title="编辑角色" :visible="editRoleVisible">
    <el-form ref="form" :rules="rules" :model="formData" label-width="120px">
      <el-form-item prop="name" label="角色名称">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item prop="description" label="角色描述">
        <el-input v-model="formData.description"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="btnCancel">取 消</el-button>
      <el-button size="small" type="primary" @click="btnOk">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDetailRole, editRole } from '@/api/setting'
export default {
  props: {
    // 控制弹层的显示
    editRoleVisible: {
      type: Boolean,
      default:false
    },
    // 编辑的是哪一行的数据
    roleId: {
      type: String,
      required:true
    }
  },
  watch: {
    roleId: async function (changeId) {
      if (changeId) {
        await this.getDetailRole()
      } 
     }
  },
  data() { 
    return {
      // 表单中的数据
      formData: {
        name: '',
        description:''
      },
      // 校验规则
      rules: {
        name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' },]
      }
    }
  },
  methods: {
    //根据id 获取当前点击编辑的用户详情
    getDetailRole() {
      try {
        this.$nextTick(async () => { 
          this.formData = await getDetailRole(this.roleId,this.$refs.form.$el)
        })
      } catch (error) {
        console.log('获取数据错误，请稍后再试',error);
      } 
    },
    // 点击取消事件
    btnCancel() {
      this.$refs.form.resetFields()
      this.$emit('update:editRoleVisible',false)
    },
    // 提交事件
    btnOk() {
      this.$refs.form.validate(async isOk => { 
        if (isOk) {
          // 校验通过，开始发送请求
          try {
            await editRole(this.formData, this.$refs.form.$el)
            // 当代码执行到此处说明编辑成功，关闭弹层
            this.$emit('update:editRoleVisible', false)
            // 给主页传递一个自定义事件，给用户一点交互告诉用户编辑完毕
            this.$emit('editRoleSuccess')
            // 最后清除表单的数据和校验结果
            this.$refs.form.resetFields()
          } catch (error) {
            // 可能出错的代码 try...catch起来 
            console.log('后台可能出现了一些错误，请稍后再试...',error);
          }
        }
      })
    }
  }
}
</script>

<style>

</style>